<style>
.frame {
  height: 100vh;
}
.main{
  padding: 0;
  /* margin-top: 60px; */
  
}
.header {
  background-color: #545c64;
  display: flex;
  justify-content: space-between;
}
.header-left {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 520;
  font-size: 20px;
  color: #ffffff;
}
.header-left:hover {
  cursor: pointer;
}
.header-left img {
  width: 50px;
  height: 50px;
  margin-top: 5px;
  margin-right: 10px;
}
.search {
  line-height: 60px;
}
.main {
  background-color: rgba(238, 238, 238, 0.5);
}
.footer {
  background-color: #ccc;
}
.el-menu-demo {
  /* float: right; */
}
</style>

<style>
.el-menu-item {
  border-bottom: 2px solid black;
}
</style>

<template>
  <div class="">
    <el-container class="frame">
      <el-header class="header">
        <!-- <div class="header-left"> -->
          <a href="/">
        <div class="header-left">
          <img src="../assets/img/1.png" alt="logo" />
          <div class="name">前端爱好者小王</div>
        </div></a>
        <!-- <router-link to="/index" tag="div" class="header-left" @click.native="toindex('/index')">
          <img src="../assets/img/1.png" alt="logo" />
          <div class="name">前端爱好者小王</div>
        </router-link> -->
        <!-- </div> -->
        <div class="search">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="input2"
            size="small"
          >
          </el-input>
        </div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >
          <el-menu-item index="/index" >首页</el-menu-item>
          <el-menu-item index="/mine">个人简历</el-menu-item>
          <el-menu-item index="/messageboard"
            ><span class="el-icon-edit"></span>小王的留言板</el-menu-item
          >
          <el-menu-item index="/tools"
            ><span class="el-icon-suitcase-1"></span>前端工具箱</el-menu-item
          >
        </el-menu>
      </el-header>
      <el-main class="main">
        <keep-alive exclude='Mine'>
         <router-view ref="children"></router-view>
        </keep-alive>
       
      </el-main>
      <!-- <el-footer class="footer">Footer</el-footer> -->
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex2: "/index",
      input2: "",
    };
  },
  name: "Frame",
  components: {

  },
  methods:{
    toworks(){
      console.log("我执行了");
      this.$refs.children.three()
    }
  }
};
</script>
